<script setup>
import { Search } from "@element-plus/icons-vue";
import TextUnderColor from "@/components/TextUnderColor.vue";
const posts = [
  {
    title: "Vue.js 组件库推荐",
    author: "星与你消失之日",
    date: "2023-12-01",
    like: "141",
    flower: "999+",
    comment: "783",
    image:
      "https://weavatar.com/avatar/033dc6412dbf24b03b4c00c40c56d9fd?s=96&d=mm&r=g",
    content:
      "在选择 Vue.js 组件库时，有几个流行的选择值得考虑。首先是 Element Plus，它是 Element UI 的升级版，专为 Vue 3 打造，不仅继承了 Element UI 强大的功能和丰富组件，还进一步提升了性能和用户体验，非常适合需要大量桌面端组件的企业级应用。另一个不可忽视的选择是 Vuetify，这是一款遵循 Google Material Design 指南的 Vue.js 组件库，它以丰富的预设样式和组件闻名，非常适合希望快速搭建出美观且功能齐全界面的开发者。对于寻求全面解决方案的人来说，Quasar Framework 可能是最合适的选择，它不仅仅是一个组件库，更是一整套工具集，支持开发者构建响应式网站、PWA、移动应用以及桌面应用，其灵活性和强大的功能使其成为多平台开发的理想选择。",
  },
  {
    title: "如何在 Vue.js 中使用 Axios 发送请求",
    author: "ZeroCounter",
    date: "2023-12-02",
    like: "871",
    flower: "999+",
    comment: "999+",
    image:
      "https://weavatar.com/avatar/eb2cd8279cb202cf08ea75072300301f?s=96&d=mm&r=g",
    content:
      "通常情况下，我们会在 Vue 组件的方法或者生命周期钩子中调用 Axios 方法来发送请求。比如，在一个 Vue 组件的 mounted 钩子中，你可以调用 Axios 的 get 方法来获取服务器的数据。这个方法接受一个 URL 作为参数，该 URL 指向你要请求的资源。除了基本的 URL 参数外，你还可以传递一个配置对象给 Axios 方法，这个配置对象可以包含请求头、请求体等信息，用于自定义请求的行为。",
  },
  {
    title: "JavaScript 中的闭包",
    author: "西瓜撞地球",
    like: "999+",
    flower: "999+",
    comment: "999+",
    date: "2023-12-03",
    image:
      "https://weavatar.com/avatar/2fcb8ddf2b201ed6998534776f43c09e?s=96&d=mm&r=g",
    content:
      "在 JavaScript 中，闭包是一个非常重要的概念，它允许一个函数访问并操作其外部作用域中的变量，即使这个外部函数已经执行完毕。闭包的核心在于函数能够记住并访问它的词法环境，即它被创建时所在的作用域。这种机制使得内部函数可以“封闭”对外部作用域变量的访问，即便外部函数已经执行完毕，这些变量也不会被垃圾回收机制清除，因为它们仍然被内部函数引用着。",
  },
  {
    title: "CSS Flexbox 布局指南",
    author: "dujun",
    like: "9999+",
    flower: "9999+",
    comment: "9999+",
    date: "2023-12-04",
    image:
      "https://weavatar.com/avatar/1b71eebe47b8d362b1e208992a1adb36?s=96&d=mm&r=g",
    content:
      "CSS Flexbox（弹性盒布局）是一种现代的布局模式，旨在提供一种更加有效的方式来对齐、居中和分配空间给容器内的项目。Flexbox 特别适合于单维布局，如行或列布局，它可以轻松解决传统布局方式中难以处理的对齐和空间分配问题。通过 Flexbox，你可以轻松地调整项目之间的间距、对齐方式，以及如何响应不同的屏幕尺寸。",
  },
  {
    title: " Vue.js 中的路由管理 ",
    author: "LIN 林",
    like: "9999+",
    flower: "9999+",
    comment: "9999+",
    date: "2023-12-04",
    image:
      "https://weavatar.com/avatar/afcb21221b3785f83e89cb3c63ed4020?s=96&d=mm&r=g",
    content:
      "在 Vue.js 中，路由管理是构建单页应用（SPA）时非常关键的一部分。Vue Router 是官方提供的路由管理库，它允许开发者通过定义路由规则来控制页面导航，并且可以在不重新加载整个页面的情况下切换不同的视图组件。这种机制不仅提高了用户体验，还使得应用的结构更加清晰易维护。",
  },
  {
    title: "Next.js 介绍",
    author: "Winner365",
    like: "99+",
    flower: "8999+",
    comment: "1999+",
    date: "2023-11-14",
    image:
      "https://weavatar.com/avatar/b61b282670ced0f46d8fe58ecfabffdf?s=96&d=mm&r=g",
    content:
      "Next.js 是一个基于 React 的服务器端渲染（SSR）和静态网站生成（SSG）的框架，由 Vercel 公司开发并维护。它极大地简化了构建高性能、可扩展的 Web 应用的过程，特别是对于需要优化 SEO 和首屏加载时间的应用来说。Next.js 提供了许多开箱即用的功能，使得开发者可以专注于业务逻辑而不是底层架构。",
  },
  {
    title: "Nuxt.js 介绍",
    author: "满心",
    like: "17+",
    flower: "18+",
    comment: "1999+",
    date: "2024-11-14",
    image:
      "https://weavatar.com/avatar/9b3a681168a25e910954372e468fbc91?s=96&d=mm&r=g",
    content:
      "Nuxt.js 是一个基于 Vue.js 的通用应用框架用应用框架用应用框架，它简化了构建服务器渲染（SSR）、静态生成和单页应用（SPA）的过程。Nuxt.js 旨在提供一个更高效、更简洁的方式来开发 Vue 应用，同时保持高度的灵活性和可扩展性。通过 Nuxt.js，开发者可以快速搭建出结构清晰、易于维护的应用程序。",
  },
  {
    title: "（Server-Side Rendering, SSR）",
    author: "心",
    like: "17+",
    flower: "18+",
    comment: "1999+",
    date: "2024-12-14",
    image:
      "https://weavatar.com/avatar/8546cf1694037de5905abc62aeadf5e9?s=96&d=mm&r=g",
    content:
      "一种网页渲染技术，它指的是在服务器上生成完整的 HTML 页面，并将这些页面发送到客户端浏览器进行显示。与客户端渲染（Client-Side Rendering, CSR）不同，SSR 在用户请求页面时就完成了大部分的渲染工作，这意味着用户接收到的是一个已经构建好的页面，而不是一个空壳需要等待 JavaScript 加载和执行来填充内容。",
  },
];
</script>
<template>
  <div>
    <div class="header flex flex-between gap-20">
      <div class="flex flex-align-center gap-20">
        <TextUnderColor text="全部讨论"> </TextUnderColor>
        <div class="flex">
          <el-input placeholder="请输入内容" v-model="input"> </el-input>
          <el-button
            :icon="Search"
            circle
            style="border-radius: 3px"
          ></el-button>
        </div>
      </div>
      <div class="flex gap-20">
        <div>
          <el-link type="primary" class="div_el_huati" :underline="false"
            >AI 问答</el-link
          >
        </div>
        <div>
          <el-link type="primary" class="div_el_huati" :underline="false"
            >我的讨论</el-link
          >
        </div>

        <div>
          <el-link type="primary" class="div_el_huati" :underline="false"
            >回复我的讨论</el-link
          >
        </div>
      </div>
    </div>
    <div class="post-container">
      <div class="gird gird-4 gap-20">
        <a href="javascript:void(0)" v-for="item in posts" class="post-item">
          <div>
            <img :src="item.image" alt="" class="image" />
          </div>
          <div>
            <h4>{{ item.title }}</h4>
          </div>
          <div class="desc">
            <span>{{ item.date }}</span>
          </div>
          <div class="post-content">
            {{ item.content }}
          </div>

          <div class="flex flex-between">
            <div class="flex flex-align-center gap-5">
              <svg
                t="1732619212709"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5436"
                width="24"
                height="24"
              >
                <path
                  d="M775.2192 784.7936h-115.2c-6.4 0-12.544 2.5088-17.152 6.9632l-113.7152 110.1824a24.704 24.704 0 0 1-34.3552 0l-113.7152-110.1824c-4.608-4.4544-10.752-6.9632-17.152-6.9632h-115.2c-78.6432 0-142.336-63.744-142.336-142.336v-93.952h811.2128v93.952c0 78.592-63.744 142.336-142.3872 142.336z"
                  fill="#ffa115"
                  p-id="5437"
                ></path>
                <path
                  d="M512 939.6736c-13.8752 0-27.7504-5.2224-38.5536-15.7184L361.472 815.5136H248.7808c-95.4368 0-173.056-77.6704-173.056-173.056V266.8544c0-95.4368 77.6704-173.056 173.056-173.056h526.4896c95.4368 0 173.056 77.6192 173.056 173.056v375.552c0 95.4368-77.6704 173.056-173.056 173.056H662.528l-111.9744 108.4928a55.13216 55.13216 0 0 1-38.5536 15.7184zM248.7808 155.2384c-61.5424 0-111.616 50.0736-111.616 111.616v375.552c0 61.5424 50.0736 111.616 111.616 111.616h115.2c14.4896 0 28.16 5.5296 38.5536 15.616L512 875.776l109.5168-106.0864c10.3936-10.0864 24.064-15.616 38.5536-15.616h115.2c61.5424 0 111.616-50.0736 111.616-111.616V266.8544c0-61.5424-50.0736-111.616-111.616-111.616H248.7808z"
                  fill="#474A54"
                  p-id="5438"
                ></path>
                <path
                  d="M731.9552 396.544h-444.416c-16.9472 0-30.72-13.7728-30.72-30.72s13.7728-30.72 30.72-30.72h444.4672c16.9472 0 30.72 13.7728 30.72 30.72s-13.7728 30.72-30.7712 30.72zM550.2464 578.56H287.5392c-16.9472 0-30.72-13.7728-30.72-30.72s13.7728-30.72 30.72-30.72h262.7584c16.9472 0 30.72 13.7728 30.72 30.72s-13.7728 30.72-30.7712 30.72z"
                  fill="#474A54"
                  p-id="5439"
                ></path>
              </svg>
              <small>{{ item.like }}</small>
            </div>

            <div class="flex flex-align-center gap-5">
              <svg
                t="1732619599585"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3103"
                width="24"
                height="24"
              >
                <path
                  d="M517.12 888.9344c-129.5872 0-241.7152-45.312-333.312-134.6048-74.3424-72.4992-115.6608-156.4672-133.6832-200.0896-11.4176-27.648-10.9056-59.136 1.4336-86.272 18.9952-41.8816 62.0544-122.4192 136.4992-191.8464 91.4944-85.2992 201.3184-128.5632 326.4-128.5632 124.8768 0 235.1616 43.1104 327.8336 128.1024 75.52 69.2736 119.808 149.76 139.4688 191.5904 12.9536 27.4944 13.6704 59.4432 2.048 87.6032-18.0736 43.6224-59.4944 127.5904-133.888 199.9872-91.4432 88.9344-203.4176 134.0928-332.8 134.0928z m-410.1632-358.1952c36.864 89.1904 150.6304 296.704 410.1632 296.704 259.2256 0 373.0432-207.1552 409.9584-296.192 5.0688-12.1856 4.7616-26.0096-0.8704-37.888-40.2432-85.504-160.9728-284.416-411.6992-284.416S146.3808 407.808 107.52 493.312a47.30368 47.30368 0 0 0-0.5632 37.4272z"
                  fill="#474A54"
                  p-id="3104"
                ></path>
                <path
                  d="M517.12 518.1952m-151.04 0a151.04 151.04 0 1 0 302.08 0 151.04 151.04 0 1 0-302.08 0Z"
                  fill="#ffa115"
                  p-id="3105"
                ></path>
                <path
                  d="M517.12 699.9552c-100.2496 0-181.76-81.5104-181.76-181.76 0-100.1984 81.5104-181.76 181.76-181.76s181.76 81.5616 181.76 181.76c0 100.2496-81.5616 181.76-181.76 181.76z m0-302.08c-66.3552 0-120.32 53.9648-120.32 120.32s53.9648 120.32 120.32 120.32 120.32-53.9648 120.32-120.32-53.9648-120.32-120.32-120.32z"
                  fill="#474A54"
                  p-id="3106"
                ></path>
              </svg>
              <small>{{ item.comment }}</small>
            </div>
            <div class="flex flex-align-center gap-5">
              <svg
                t="1732619686643"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3103"
                width="24"
                height="24"
              >
                <path
                  d="M160.768 369.6128S274.3808 599.04 512 599.04s367.8208-212.1216 366.2848-256.9216c-16.7936 143.2064-56.7808 392.7552-362.3424 392.7552S158.2592 442.1632 160.768 369.6128z"
                  fill="#ffa115"
                  p-id="3104"
                ></path>
                <path
                  d="M141.5168 757.2992c-16.9472-0.6656-31.2832 12.4928-31.9488 29.44s12.4928 31.2832 29.44 31.9488c171.0592 7.0656 235.1104 89.7024 238.0288 93.6448a30.73536 30.73536 0 0 0 42.752 6.8096 30.73024 30.73024 0 0 0 6.9632-42.9056c-3.2256-4.5056-81.8688-110.5408-285.2352-118.9376zM892.3136 757.2992c-203.3664 8.3968-282.0096 114.432-285.2352 118.9376a30.73024 30.73024 0 0 0 24.8832 48.6912c9.5232 0 18.944-4.4544 24.9344-12.7488 0.6144-0.8704 64.1024-86.3232 237.9264-93.44 16.9472-0.7168 30.1056-15.0016 29.44-31.9488s-15.0016-30.1568-31.9488-29.4912z"
                  fill="#474A54"
                  p-id="3105"
                ></path>
                <path
                  d="M823.3472 622.6944c50.432-64.4608 102.4-151.6544 80.5376-371.8144-1.1264-28.2112-6.2976-67.3792-36.8128-86.528-33.536-21.0432-78.6432-6.0928-118.3232 11.3664-25.088 11.008-49.3056 20.7872-74.1376 29.952-5.632 2.0992-11.9296 0.256-15.6672-4.5056l-83.5584-106.6496a75.04896 75.04896 0 0 0-58.112-28.8768c-22.9376-0.4096-44.3392 9.5232-58.9824 27.0336L368.128 200.8064c-3.7376 4.4544-9.9328 6.144-15.4112 4.1472l-102.5024-37.1712c-10.5984-5.2736-48.8448-21.7088-83.3024-4.5056-16.3328 8.1408-37.0688 26.6752-43.3152 68.9152-0.0512 0.3072-0.1024 0.6144-0.1024 0.8704-1.1264 9.6256-26.5216 237.056 77.1584 368.7424l0.4608 0.6144c30.6688 39.0656 120.9856 153.856 284.0576 162.6624v166.5024c0 16.9472 13.7728 30.72 30.72 30.72s30.72-13.7728 30.72-30.72v-167.6288c157.44-11.9808 232.96-85.3504 276.736-141.2608zM249.4464 564.4288l-0.512-0.6144C162.9184 454.5536 183.296 251.2384 184.4736 240.64c1.792-11.8272 5.4784-20.1728 9.7792-22.3744 6.5536-3.328 21.4016 0.7168 28.928 4.7104 1.3824 0.7168 2.7648 1.3824 4.2496 1.8944l104.3456 37.8368c29.696 10.8032 63.2832 1.7408 83.5072-22.528l90.1632-108.032c3.6864-4.4544 8.448-4.864 10.8544-4.9664 2.4576 0.0512 7.168 0.768 10.7008 5.3248l83.5584 106.5984a74.99776 74.99776 0 0 0 85.2992 24.2176c25.9584-9.5744 51.3536-19.8144 77.568-31.3344 49.8688-21.9136 60.5184-15.8208 60.9792-15.5648 0.0512 0.0512 6.912 5.2224 8.0896 37.7344 0 0.6656 0.0512 1.28 0.1536 1.9456 19.8144 198.1952-22.5792 271.104-67.7376 328.7552-42.496 54.272-110.9504 116.8896-264.7552 119.3472-1.6384 0-3.2256 0.0512-4.864 0.0512-146.0224-0.0512-228.5056-105.0624-255.8464-139.8272z"
                  fill="#474A54"
                  p-id="3106"
                ></path>
              </svg>
              <small>{{ item.flower }}</small>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import { Search } from "@element-plus/icons-vue";

export default {
  data() {
    return {
      checkList: [],
      frequency: 0, //直接从后端拿取
      isvulse: false,
      input: "",
    };
  },
  methods: {
    queding() {
      this.isvulse = false;
      //将选项传递到后端
      console.log(this.checkList);
    },
    quxiao() {
      this.isvulse = false;
      this.checkList = [];
      console.log(this.checkList);
    },
    tiaozhuan() {
      this.$router.push("AIquiz");
    },
  },
};
</script>

<style scoped>
.post-image {
  width: 100%;
  max-width: 450px;
  margin-bottom: 10px;
}

.el-comment {
  margin-bottom: 10px;
}

.div_el_huati {
  font-size: 18px;
  font-weight: 900;

  /* border: 1px solid red; */
}

.header {
  border-bottom: 2px solid #409eff;
  padding-bottom: 20px;
  display: flex;
  flex-direction: row;
}
.post-container {
  margin-top: 1rem;
  padding: 1rem 0;
}
.post-item {
  transition: 0.4s;
  display: block;
  font-weight: 300;
  padding: 1rem;
  text-decoration: none;
  background-color: #fdfdfd;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin-top: 1rem;
  color: #262626;
}
.image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-top: -50%;
}
.post-content {
  margin: 1rem 0;
  text-align: left;
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-indent: 2em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8; /* 设置最大显示行数 */
  overflow: hidden;
  text-overflow: ellipsis;
}
.post-item:hover {
  transform: translate(0px, -15px);
}
.desc {
  margin-top: 0.5rem;
  font-size: xx-small;
}
</style>
